<template>
  <el-container style="height: 100%">
    <el-aside width="200px">
      <el-menu
        default-active="curhash"
        class="el-menu-vertical-demo"
        unique-opened
        router
        background-color="#00005E"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <svg
          t="1652188873369"
          style="margin-left: 40px; margin-top: 10px"
          class="icon"
          viewBox="0 0 1110 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2091"
          width="64"
          height="64"
        >
          <path
            d="M463.872 673.28c-52.224 0-84.48 35.328-105.984 59.392-10.752 12.288-19.456 22.016-28.16 28.16s-15.872 8.704-27.136 8.704c-16.896 0-27.136-8.704-36.352-19.968-8.704-11.776-14.336-23.04-14.336-23.04l-60.416 22.528s7.68 20.48 24.064 41.472 46.08 44.544 87.04 44.544c25.6 0 48.128-9.216 65.024-20.992 16.384-12.288 28.672-26.624 39.424-38.4 21.504-24.064 32.256-37.376 57.856-37.376-2.56 0 3.584 1.536 8.704 7.168 5.12 5.12 8.704 10.24 8.704 10.24l8.704 15.36h41.472l10.24-14.336s3.584-5.632 8.704-11.264c5.12-5.12 11.776-7.168 8.704-7.168 25.6 0 36.352 13.312 57.856 37.376 10.752 12.288 23.04 26.624 39.424 38.4 16.384 12.288 38.912 20.992 65.024 20.992 40.96 0 70.144-23.552 87.04-44.544 16.384-20.48 24.064-41.472 24.064-41.472l-60.416-22.528s-4.096 11.776-12.8 23.04c-8.704 11.776-20.48 19.968-37.376 19.968-11.776 0-17.92-3.072-26.624-8.704-8.704-6.144-18.432-15.872-29.184-28.16-21.504-24.576-53.76-59.392-105.984-59.392-23.04 0-37.376 10.24-48.128 19.968-11.776-9.728-27.136-19.968-49.152-19.968z m274.432-420.352c71.68 0 129.536 57.856 129.536 129.536s-57.856 129.536-129.536 129.536-129.536-57.856-129.536-129.536 57.344-129.536 129.536-129.536z m-452.608 0c71.68 0 129.536 57.856 129.536 129.536s-57.856 129.536-129.536 129.536-129.536-57.856-129.536-129.536 57.856-129.536 129.536-129.536z m0-64.512c-95.744 0-175.616 69.632-190.976 161.28h-67.584v65.024h67.584c15.36 91.648 95.232 161.28 190.976 161.28 107.008 0 194.048-87.04 194.048-194.048 0-18.432 13.824-32.256 32.256-32.256s32.256 13.824 32.256 32.256c0 107.008 87.04 194.048 194.048 194.048 95.744 0 175.616-69.632 190.976-161.28h67.584v-65.024h-67.584c-15.36-91.648-95.232-161.28-190.976-161.28-77.312 0-144.384 45.568-175.616 111.104-14.848-8.704-32.256-14.336-50.688-14.336s-35.84 5.12-50.688 14.336c-31.232-65.536-98.304-111.104-175.616-111.104z"
            p-id="2092"
            fill="#e6e6e6"
          ></path>
        </svg>
          <div v-for="item in powerarr" :key="item.url"> 
      <el-menu-item :index="item.url" v-if="!item.children">
        <i :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
      <el-submenu :index="item.url" v-else>
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
          <el-menu-item v-for="item1 in item.children" 
          :key="item1.url" :index="item1.url">{{item1.name}}</el-menu-item>
      </el-submenu>
      </div>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div style="float: left">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/main/indextotal' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item v-for="item in breadList" :key="item">{{
              item
            }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div style="float: right; margin-right: 20px">
          <span style="margin-right: 30px; font-size: 18px">{{
            nickname
          }}</span>
          <img
            src="../../public/img/touxiang.jpg"
            alt="用户头像"
            style="width: 50px; border-radius: 50%; margin-right: 20px"
          />
          <el-dropdown>
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="res()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <hr style="color: grey" />
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {logout} from '@/api/apis'
export default {
  data() {
    return {
      curhash: "", //当前的hash
      breadList: [], //面包屑
      // username: "",
      list: [
        {
          url: "/main/indextotal",
          icon: "el-icon-s-data",
          name: "数据统计",
          roles: ['0', '1','2'],
        },
        {
          url: "/main/homelist",
          icon: "el-icon-picture-outline",
          name: "轮播图",
          roles: ['0', '1','2'],
        },
        {
          url: "/ccc",
          icon: "el-icon-s-custom",
          name: "师资队伍",
          children:[
            { url: "/main/facultylist", name: "教师列表" },
            { url: "/main/addfaculty", name: "添加教师" },
          ],
          roles: ['0', '1','2'],
        },
        {
          url: "/ddd",
          icon: "el-icon-location",
          name: "用户管理",
          children:[
            { url: "/main/userlist", name: "用户列表" },
            { url: "/main/users", name: "添加用户" },
          ],
          roles: ['1','2'],
        },
        {
          url: "/ee",
          icon: "el-icon-thumb",
          name: "文章管理",
          children:[
            { url: "/main/artical", name: "文章列表" },
            { url: "/main/articalpost", name: "发表文章" },
          ],
          roles: ['0', '1','2'],
        },
        {
          url: "/main/log",
          icon: "el-icon-s-order",
          name: "日志管理",
          roles: ['2'],
        },
      ],
      nickname:''
    };
  },
  created() {
    this.curhash = this.$route.path;
    // this.username = sessionStorage.username;
    this.nickname = sessionStorage.nickname;
  },
    computed: {
    powerarr() {
      //根据权限返回运算完毕的数组
      //filter()  过滤函数
      let newarr = this.list.filter(item => {
        //返回包含此用户权限的数据
        // console.log(sessionStorage.role)
        return item.roles.includes(sessionStorage.role)
      });
      // console.log(newarr)
      return newarr;
    }
  },
  //路由监听 原生onhashchange
  //watch 可以观察vue很多属性的变化 包括hash值
  watch: {
    // 要检查谁的变化  to切换到哪里 from 来自于哪里
    $route(to, from) {
      // console.log(11111111111)
      // console.log(to)
      this.breadList = to.meta.breadList;
    },
  },
  methods: {
    res() {
      logout().then(
        res=>{
          // console.log(res)
          if(res.data.code==200){
              sessionStorage.removeItem("username"); //移除sessionStorage中的用户信息
              sessionStorage.removeItem("role"); 
              sessionStorage.clear(); //清空sessionStorage中的用户信息
              this.$router.push("/home"); //跳转到登录页面 
          }
        }
      )
      
    },
  },
};
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 100px;
}
.el-header div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-aside {
  background-color: #00005e;
}

.el-main {
  background-color: #ffffff;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>